From 9fec718e0fc54b87e12812142e692b4f2eade07d Mon Sep 17 00:00:00 2001
From: zephex-alt <166333351+zephex-alt@users.noreply.github.com>
Date: Tue, 30 Apr 2024 18:59:14 +0000
Subject: video players for both anime and kdrama sites are consistent now

---
 src/app/kdrama/[id]/buttons.jsx | 45 ++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 23 deletions(-)

(limited to 'src/app/kdrama/[id]')

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index 86110be..9f6145c 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -20,23 +20,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 		setEpisode(episodeText);
 	}
 
-	// Auto loads the first episode
-	useEffect(() => {
-		const fetchData = async () => {
-			try {
-				let firstVideoLink = episodeData[0].id;
-				let firstLink = await getVideoLink(firstVideoLink, dramaId);
-				setVideoLink(firstLink);
-				setEpisode("Episode 1");
-			} catch (error) {
-				console.log("Some error occured", error);
-				return;
-			}
-		};
-
-		fetchData();
-	}, []);
-
 	return (
 		<div>
 			<div className={styles.EpisodesContainer}>
@@ -58,9 +41,17 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 				</div>
 			</div>
 
-			<div className={styles.VideoContainer}>
-				{videoLink && (
-					<div className={styles.Video}>
+			{videoLink && (
+				<div
+					className={styles.videoPopUp}
+					id="popup"
+					onKeyDown={(event) => {
+						if (event.code === "Escape") {
+							setVideoLink("");
+						}
+					}}
+				>
+					<div className={styles.video}>
 						<MediaPlayer
 							title="dramaPlayer"
 							src={videoLink}
@@ -68,15 +59,23 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 							load="eager"
 							className={styles.VideoPlayer}
 							playsInline
+							id="videoPlayer"
 							volume={0.8}
 						>
 							<MediaProvider />
 							<PlyrLayout icons={plyrLayoutIcons} />
 						</MediaPlayer>
-						<p>{episode}</p>
+						<button
+							className={styles.closeButton}
+							onClick={() => {
+								setVideoLink("");
+							}}
+						>
+							Close
+						</button>
 					</div>
-				)}
-			</div>
+				</div>
+			)}
 		</div>
 	);
 }
-- 
cgit v1.2.3